<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>客服</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        body{
            font-family: 'Microsoft YaHei', SimHei, SimSun, sans-serif;
            font-size: 12px;
            font-style: normal;
            font-variant: normal;
            font-weight: normal;
            font-stretch: normal;
            line-height: 18px;
            overflow-x: hidden;
        }
        ul{
            list-style: none;
        }
        a{
            text-decoration: none;
            color: black;
        }
        em{
            font-style: normal;
            font-weight: normal;
        }
        .daohang{
            width: 260px;
            height: 215px;
            background-color: white;
        }
        #nav{
            width: 100%;
            height: 30px;
            float: left;
            border-bottom: 1px solid #dddddd;
        }
        #nav li{
            float: left;
            font-size: 16px;
            width: 74px;
            height: 29px;
            line-height: 29px;
            text-align: center;
            cursor: pointer;
        }
        .list{
            display: none;
            width: 100%;
            height: 170px;
            float: left;
        }
        .list p{
            width: 100%;
            height: 32px;
            line-height: 30px;
            display: block;
        }
        .list b{
            display: block;
            font-size: 18px;
            width: 100%;
            height: 32px;
            line-height: 30px;
        }
        .list a{
            position: relative;
            top: 25px;
            display: block;
            float: left;
            margin-right: 16px;
            width: 112px;
            height: 26px;
            border: #7e8b9b solid 1px;
            line-height: 26px;
            text-align: center;
            color: #7e8b9b;
            font-size: 14px;
        }
        .list a:hover{
            background-color: #7e8b9b;
            color: white;
        }
        #gonggao p:first-child{
            width: 100%;
            height: 32px;
            margin-top: 5px;
            display: block;
            background-color: #F8F8F8;
        }
        #gonggao p:first-child span{
            float: left;
            display: block;
            background: url("img/icon.png")no-repeat;
            background-position: -68px -75px;
            width: 20px;
            height: 20px;
            position: relative;
            top: 4px;
        }
    </style>
    <script src="../js/jquery-3.1.0.min.js" type="text/javascript">
    </script>
</head>
<body>
    <div class="daohang">
        <ul id="nav">
            <li style="color: #e86656;border-bottom: 2px solid #e86656">客服专区</li>
            <li>商务合作</li>
        </ul>
        <div class="list" style="display: block" id="gonggao">
            <p><span></span><em>9月12日例行维护公告（已完成）</em></p>
            <p>24小时客服热线：</p>
            <b>028-85309911</b>
            <a href="#">在线客服></a>
            <a href="#">关注客服微信></a>
        </div>
        <div class="list">
            <p>商务QQ：3513366873</p>
            <p>合作热线：</p>
            <b>0756-3335688-2783</b>
            <p>E-mail：jx3-bc@qq.com</p>
        </div>
    </div>
</body>
<script>
    var title = document.getElementById('nav').getElementsByTagName('li');
    var body = document.getElementsByClassName('list');

    for(var i=0;i<title.length;i++){
        title[i].id = i;
        title[i].onclick = function(){
            tab(this.id);
        }
    }
    function tab(obj) {
        for (var j = 0; j < title.length; j++) {
            if (obj == j) {
                title[j].style.borderBottom = '2px solid #e86656';
                title[j].style.color = '#e86656';
                body[j].style.display = 'block';
            } else {
                title[j].style.borderBottom = '';
                title[j].style.color = '';
                body[j].style.display = '';
            }
        }
    }
</script>
</html>